<template>
   <div class="page">
       <el-row :gutter="20">
           <el-col :span="24" :xs="24" :sm="24" :lg="24">
               <div class="grid-content bg-purple">
                   <div class="panel">
                       <div class="panel-body">
                           <el-row :gutter="20">
                               <el-col :span="10">
                                   <h5>入库</h5>
                               </el-col>
                           </el-row>
                       </div>
                   </div>
               </div>
           </el-col>
       </el-row>
       <el-row :gutter="20">
           <el-col :span="24" :xs="24" :sm="24" :lg="24">
               <div class="grid-content bg-purple">
                   <div class="panel">
                       <div class="panel-body">
                           <el-card class="box-card">
                               <el-form ref="inForm" label-width="80px" :rules="createRule" :model="createParams">
                                   <el-form-item label="快递单号" prop="single_number">
                                       <el-input @blur="queryCode" v-model="createParams.single_number" >
                                           <el-button slot="append" @click="queryInfo">获取订单信息</el-button>
                                       </el-input>
                                   </el-form-item>
                                   <el-form-item label="" v-loading="loading">
                                       <el-row type="flex" class="row-bg" justify="space-around" :gutter="20">
                                           <el-col :span="12">
                                               <el-row :gutter="20">
                                                   <el-col :span="12"><el-tag type="warning">快递公司</el-tag></el-col>
                                                   <el-col :span="12"> <h4>{{orderInfoData.name}}</h4></el-col>
                                               </el-row>
                                           </el-col>
                                           <el-col :span="12">
                                               <el-row :gutter="20">
                                                   <el-col :span="12"><el-tag type="warning">网点</el-tag></el-col>
                                                   <el-col :span="12"> <h4>{{orderInfoData.network_name}}</h4></el-col>
                                               </el-row>
                                           </el-col>
                                       </el-row>
                                   </el-form-item>
                                   <el-form-item label="会员手机" prop="to_mobile">
                                       <el-input v-model="createParams.to_mobile"></el-input>
                                   </el-form-item>
                                   <el-form-item label="订单类型" >
                                       <el-select v-model="createParams.type"  placeholder="请选择" style="width: 100%">
                                           <el-option
                                               v-for="(v,k) in type"
                                               :key="k"
                                               :label="v"
                                               :value="k"
                                               >
                                           </el-option>
                                       </el-select>
                                   </el-form-item>
                                   <el-form-item label="派送员" prop="courier_id" v-if="createParams.type===0">
                                       <el-select v-model="createParams.courier_id" filterable placeholder="请选择" style="width: 100%">
                                           <el-option
                                               v-for="(v,k) in courierData"
                                               :key="v.id"
                                               :label="v.name"
                                               :value="v.id">
                                           </el-option>
                                       </el-select>
                                   </el-form-item>
                                   <el-form-item label="取件码" prop="take_code"  v-if="createParams.type==1">
                                       <el-input v-model="createParams.take_code"></el-input>
                                   </el-form-item>
                                   <el-form-item label="标记" prop="label">
                                       <el-select v-model="createParams.label" filterable placeholder="请选择" style="width: 100%">
                                           <el-option
                                               v-for="(v,k) in label"
                                               :key="k"
                                               :label="v"
                                               :value="v">
                                           </el-option>
                                       </el-select>
                                   </el-form-item>
                                   <el-form-item label="货款金额" prop="region_mark" v-if="createParams.label=='代收货款'">
                                       <el-input v-model="createParams.region_mark"></el-input>
                                   </el-form-item>
                                   <el-form-item>
                                       <el-button type="warning" style="width:50%;margin:0 auto;display:block;background: rgba(248,154,55,1);" @click="queryInbound"> 入 库 </el-button>
                                   </el-form-item>
                               </el-form>
                           </el-card>
                       </div>
                   </div>
               </div>
           </el-col>
       </el-row>
   </div>
</template>

<script>
    import api from '../apis'
    export default {
        name: "Inbound",
        data(){
            let checkMobile = (rule, value, callback) => {
                let phone=/^[1][3,4,5,7,8][0-9]{9}$/;
                if (!phone.test(value)) {
                    callback(new Error('请输入正确的手机号'));
                } else {
                    callback();
                }
            };
            return {
                //加载动画状态
                loading:false,
                //请求参数
                createParams:{
                    single_number:'',
                    to_mobile:'',
                    take_code:'',
                    type:1,
                    courier_id:'',
                    label:'无',
                    region_mark:'',
                },
                //入库请求验证规则
                createRule:{
                    single_number: [
                        { required: true, message: '请填写快递单号', trigger: 'blur' },
                    ],
                    to_mobile: [
                        { required: true, message: '请填写会员手机', trigger: 'blur' },
                        {validator: checkMobile, trigger: 'blur'}
                    ],
                },
                //订单信息数据
                orderInfoData:{

                },
                //订单类型数组
                type:[
                    '派送件',
                    '自提件'
                ],
                //派送员数据
                courierData:[],
                //标记数组
                label:[
                    '无',
                    '破损',
                    '污染',
                    '地址变更',
                    '代收货款',
                ],
                //快递单信息请求状态
                loadInfo:false,
            }
        },
        methods:{
            /**
             * 请求员工列表
             */
            queryCourier(){
                api.staff.fetch({}).then(response=>{
                    this.courierData = response.data.data;
                }).catch(errors=>{

                });
            },
            /**
             * 快递订单请求取件码
             */
            queryCode(){
                this.orderInfoData = {};
                let reg = /^[0-9a-zA-Z]+$/;
                if(this.createParams.single_number.length<1||!reg.test(this.createParams.single_number)){
                    this.$message.error('快递单号格式不正确！');
                    return false;
                }
                this.loading = true;

                api.inbound.queryCode().then(response=>{
                    this.orderInfoData = response.data.data;
                    this.createParams.take_code = this.orderInfoData.code;
                    this.loading = false;
                }).catch(errors=>{
                    this.$message.error('快递信息请求失败，请稍后再试');
                    this.loading = false;
                })
            },
            /**
             * 快递订单请求信息
             */
            queryInfo(){
                this.orderInfoData = {};
                let reg = /^[0-9a-zA-Z]+$/;
                if(this.createParams.single_number.length<1||!reg.test(this.createParams.single_number)){
                    this.$message.error('快递单号格式不正确！');
                    return false;
                }
                this.loading = true;

                api.inbound.queryInfo({single_number:this.createParams.single_number}).then(response=>{
                    this.orderInfoData = response.data.data;
                    // this.createParams.take_code = this.orderInfoData.take_code;
                    this.loading = false;
                }).catch(errors=>{
                    this.$message.error('快递信息请求失败，请稍后再试');
                    this.loading = false;
                })
            },
            /**
             * 请求入库
             */
            queryInbound(){
                if(this.createParams.label=='无'){
                    this.createParams.label='';
                }
                this.$refs['inForm'].validate((valid) =>{
                    if(valid){
                        api.inbound.inbound(this.createParams).then(response=>{
                            this.$message.success('入库成功');
                            this.$refs['inForm'].resetFields();
                            this.orderInfoData.network_name = '';
                            this.orderInfoData.name = '';
                        }).catch(errors=>{
                            this.$message.error(errors.response.data.resultMessage);
                        });
                    }else{
                        return false;
                    }
                });
            }
        },
        mounted(){
            this.queryCourier();
        }
    }
</script>

<style lang="scss" scoped>
    .box-card{
        width: 40%;
        margin:0 auto;
    }
</style>
